<template>
  <Panel>
    <!-- 标题 -->
    <template #title>修改密码</template>
    <!-- 内容 -->
    <template>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        size="mini"
      >
        <el-form-item label="原密码" prop="oldPass">
          <el-input
            type="password"
            v-model="ruleForm.oldPass"
            autocomplete="off"
            @blur="chepassword"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPass">
          <el-input
            type="password"
            v-model="ruleForm.newPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确定密码" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
  </Panel>
</template>

//
<script>
import {
  validatePass,
  validateCheckPass,
  validateNewPass
} from '@/utils/validate.js'
import { oldpassword, changePassword } from '@/api/user.js'
import loca from '../../utils/loca'
export default {
  data() {
    return {
      ruleForm: {
        oldPass: '',
        newPass: '',
        checkPass: ''
      },
      rules: {
        oldPass: [{ validator: validatePass, trigger: 'blur' }],
        newPass: [
          { validator: validateNewPass('新密码', this), trigger: 'blur' }
        ],
        checkPass: [
          { validator: validateCheckPass('确定新密码', this), trigger: 'blur' }
        ]
        // userGroup: [{ validator: checkAge, trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const { code, msg } = await changePassword({
            newPwd: this.ruleForm.newPass
          })
          // console.log(data)
          if (code === 0) {
            this.$message({
              type: 'success',
              message: msg
            })
            setTimeout(() => {
              loca.cle()
              location.reload()
            }, 1500)
          } else {
            this.$message({
              type: 'error',
              message: msg
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 检测原密码
    async chepassword() {
      // console.log('111')
      const { code, msg } = await oldpassword({
        oldPwd: this.ruleForm.oldPass
      })
      if (code === '00') {
        this.$message({
          type: 'success',
          message: msg
        })
      } else {
        this.$message({
          type: 'error',
          message: msg
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-input,
.el-select {
  width: 300px;
}
</style>
